<style scoped>
/* eslint-disable */
.alert_bottom {
  margin-bottom: 20px;
}

.titleclass {
  font-size: 13px;
  font-weight: bold;
  color: #2b3645;
}
.shortdesc {
  text-align: justify;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.typeclass {
  color: #5390f0;
}
/* eslint-disable */
</style>
<template>
  <div>
    <el-row style="margin-top: 20px" type="flex" justify="center">
      <el-col :span="23">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="80px"
          :inline="true"
        >
          <el-form-item label="文章标题" prop="username">
            <el-input v-model="searchForm.username"></el-input>
          </el-form-item>
          <el-form-item label="文章类型" prop="phone">
            <el-input v-model="searchForm.phone"></el-input>
          </el-form-item>
          <el-button size="small" type="primary" @click="init">搜索</el-button>
          <el-button size="small" @click="resetSearch('searchForm')"
            >重置</el-button
          >
        </el-form>
      </el-col>
    </el-row>

    <el-row type="flex" justify="center" style="margin-bottom: 10px">
      <el-col :span="23">
        <el-button
          size="small"
          icon="el-icon-plus"
          type="primary"
          @click="addBlogInfo"
          >添加文章</el-button
        >
        <el-button
          size="small"
          icon="el-icon-minus"
          type="danger"
          @click="deleteUsers"
          >批量删除</el-button
        >
      </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-col :span="23">
        <el-alert
          title
          type="success"
          :closable="false"
          show-icon
          class="alert_bottom"
        >
          已选择
          <span>{{ 0 }}</span> 项
          <a @click="clearSelectAll" style="color: red">清空</a>
        </el-alert>

        <el-table
          size="small"
          ref="multipleTable"
          :border="false"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="700"
          :highlight-current-row="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column prop="id" label="ID" width="60"></el-table-column>
          <el-table-column
            prop="blogImageUrl"
            label="文章封面"
            width="250"
            align="center"
          >
            <template slot-scope="scope">
              <img
                style="width: 200px; height: 90px"
                :src="scope.row.blogImageUrl"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="blogTitle"
            label="文章标题"
            width="200"
            align="center"
          >
            <template slot-scope="scope">
              <p class="titleclass">{{ scope.row.blogTitle }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="blogShortContent"
            width="250"
            label="文章短描述"
            align="center"
          >
            <template slot-scope="scope">
              <p class="shortdesc">{{ scope.row.blogShortContent }}</p>
            </template>
          </el-table-column>

          <el-table-column
            prop="blogTypeName"
            label="文章类型"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <p class="typeclass">{{ scope.row.blogTypeName }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="thumbCount"
            label="点击量"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="createUser" label="作者" align="center"></el-table-column> -->

          <!-- <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
          <el-table-column prop="gender" label="性别" show-overflow-tooltip></el-table-column>-->
          <el-table-column
            prop="createDate"
            label="创建时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="editBlogInfo(scope.row)"
                type="primary"
                size="mini"
                >编辑</el-button
              >
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row type="flex" justify="end">
      <el-col :span="8">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.pageNumber"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- :fullscreen="true" -->
    <el-dialog
      top="6vh"
      :title="titleText"
      :visible.sync="dialogVisible"
      width="80%"
      :fullscreen="true"
      :before-close="closeDialog"
    >
      <el-row type="flex" justify="center">
        <el-col :span="22">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="博客标题">
              <el-input
                v-model="form.blogTitle"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="博客简要">
              <el-input
                v-model="form.blogShortContent"
                style="width: 300px"
              ></el-input>
            </el-form-item>

            <el-form-item label="博客封面">
              <el-input
                v-model="form.blogImageUrl"
                style="width: 300px"
              ></el-input>
              <el-upload
                :on-success="uploadSuccess"
                class="upload-demo"
                drag
                action="http://localhost:9001/blogs-admin/image/upload/"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将图片拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
              <img
                style="width: 200px; height: 200px"
                :src="form.blogImageUrl"
              />
            </el-form-item>

            <el-form-item label="博客类型" style="width: 300px">
              <el-select v-model="form.blogTypeId" placeholder="请选择">
                <el-option
                  v-for="item in blogTypeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <mavon-editor
            style="height: 800px"
            :toolbars="toolbars"
            @imgAdd="handleEditorImgAdd"
            @imgDel="handleEditorImgDel"
            v-model="value"
            @change="change"
            ref="md"
          />
        </el-col>
      </el-row>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-col :span="7">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" @click="submit" type="primary"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  findBlogByCondition,
  getBlogTypeList,
  upload,
  submitBlogInfo,
  getBlogInfoById,
} from "@/api/blog/blog-api";
export default {
  /* eslint-disable */
  name: "bloglist",
  data() {
    return {
      //edit / add
      titleText: "新增",
      dialogVisible: false,

      // page
      total: 0,
      searchForm: {
        pageNumber: 0,
        pageSize: 10,
        ids: [],
      },
      form: {
        blogMdContent: "",
        blogContent: "",
        blogImageUrl: "",
      },
      tableData: [],

      //markdown

      value: "",
      html: "",

      blogInfo: {
        blogMdContent: "",
        blogContent: "",
        blogImageUrl: "",
      },
      blogTypeList: [
        {
          id: "",
          typeName: "",
        },
      ],

      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },

  methods: {
    addBlogInfo() {
      this.dialogVisible = true;
    },
    deleteUsers() {},
    clearSelectAll() {},
    handleSelectionChange() {},
    editBlogInfo(row) {
      getBlogInfoById(row.id).then((res) => {
        console.log(res);
        // var typeId = res.data.blogTypeId;
        // typeId = typeId.toString();
        // res.data.blogTypeId = typeId;
        this.form = res.data;
        this.value = this.form.blogMdContent;
      });

      this.dialogVisible = true;
    },
    init() {
   
      findBlogByCondition(this.searchForm).then((response) => {
        if (response.msg === "success") {
          console.log(response);
          this.total = response.data.totalElements;
          this.tableData = response.data.content;
        }
      });
    },

    //重置
    resetSearch(formName) {
      this.$refs[formName].resetFields();
      this.init();
    },
    //page
    handleSizeChange(pageSize) {
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber;
      this.init();
    },

    closeDialog() {
      this.dialogVisible = false;
    },

    submit() {
      submitBlogInfo(this.form).then((response) => {
        if (response.msg === "success") {
          this.$message({ message: "提交成功", type: "success" });
          this.closeDialog();
          this.init();
        }
      });
    },

    uploadSuccess(res) {
      console.log(res);
      this.form.blogImageUrl = res.data;
    },

    //监听markdown变化
    change(value, render) {
      this.html = render;
      this.form.blogMdContent = value;
      this.form.blogContent = render;
    },
    //上传图片接口pos 表示第几个图片
    handleEditorImgAdd(pos, $file) {
      var formdata = new FormData();
      formdata.append("file", $file);

      upload(formdata).then((res) => {
        console.log(res);
        var url = res.data;
        this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
      });
      //   this.$axios
      //     .post("http://localhost:8000/blogs/image/upload/", formdata)
      //     .then((res) => {
      //       var url = res.data.data;
      //       this.$refs.md.$img2Url(pos, url); //这里就是引用ref = md 然后调用$img2Url方法即可替换地址
      //     });
    },
    handleEditorImgDel() {
      console.log("handleEditorImgDel"); //我这里没做什么操作，后续我要写上接口，从七牛云CDN删除相应的图片
    },

    getBlogTypeList() {
      getBlogTypeList().then((res) => {
        console.log(res);
        this.blogTypeList = [];
        res.data.forEach((e) => {
          this.blogTypeList.push({
            id: e.id,
            typeName: e.typeName,
          });
        });
      });
    },
  },

  created() {
    this.init();
    this.getBlogTypeList();
  },
};
</script>

